<template>
  <div draggable="false" class="widget-mask" :style="baseInfoStyle">
    <component :is="getComponent(widgetName)" :uuid="uuid"></component>
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import lineCharts from './charts/lineCharts.vue'
import barCharts from './charts/barCharts.vue'
import pieCharts from './charts/pieCharts.vue'
import mapCharts from './charts/mapCharts.vue'
import textComponent from './components/textComponent.vue'
import imageComponent from "./components/imageComponent.vue";
import { defineProps, ComputedRef, computed } from 'vue'
import { useStore } from '@/store/index'

const componentMap:Record<string, any> = {
  lineCharts,
  barCharts,
  pieCharts,
  mapCharts,
  textComponent,
  imageComponent,
}

const store = useStore()
const props = defineProps<{
  widgetName: string;
  uuid: string;
}>()
const baseInfoStyle: ComputedRef<any> = computed<any>(() => {
  if (!store.widgetConfig[props.uuid]) {
    return {}
  }
  return {
    width: store.widgetConfig[props.uuid].width + 'px',
    height: store.widgetConfig[props.uuid].height + 'px',
    left: store.widgetConfig[props.uuid].left + 'px',
    top: store.widgetConfig[props.uuid].top + 'px',
    backgroundColor: store.widgetConfig[props.uuid].backgroundColor,
    paddingTop: store.widgetConfig[props.uuid].paddingTop + 'px',
    paddingRight: store.widgetConfig[props.uuid].paddingRight + 'px',
    paddingBottom: store.widgetConfig[props.uuid].paddingBottom + 'px',
    paddingLeft: store.widgetConfig[props.uuid].paddingLeft + 'px',
  }
})
const getComponent = (widgetName: string) => {
  return componentMap[widgetName]
}
</script>

<style lang="less">
.widget-mask {
  // position: relative;
  &:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
}
</style>